<script setup lang="ts">
import { ref, reactive } from 'vue'
import { GetVapHostConfig, SetVapHostConfig } from '../../../wailsjs/go/view/App'

const dialogVisible = ref(false)
const form = reactive({
  vapHostFolder: 'C:\\miao\\vap_host', // vapHost 文件夹
  uid: '',
  rdpServer: '',
  tcpServer: '',
})

const showDialog = () => {
  dialogVisible.value = true
}

const loadConfig = async () => {
  const oldInfo = await GetVapHostConfig(form.vapHostFolder)
  form.vapHostFolder = oldInfo.vapHostFolder!
  form.uid = oldInfo.uid!
  form.rdpServer = oldInfo.rdpServer!
  form.tcpServer = oldInfo.tcpServer!
}

const clickSaveBut = () => {
  SetVapHostConfig(form)
  dialogVisible.value = false
}

defineExpose({
  showDialog,
})
</script>

<template>
  <div>
    <el-dialog v-model="dialogVisible" title="配置 vap host service 服务" width="500">
      <div>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="服务目录">
            <el-input v-model="form.vapHostFolder" />
          </el-form-item>
          <el-form-item label="服务ID">
            <el-input v-model="form.uid" placeholder="应用主机服务id不能重复。eg: dev1" />
          </el-form-item>
          <el-form-item label="rdp配置">
            <el-input
              v-model="form.rdpServer"
              placeholder="有NAT等网络转发的情况下请填写外部访问地址。eg: 10.65.208.187:3389"
            />
          </el-form-item>
          <el-form-item label="tcp配置">
            <el-input
              v-model="form.tcpServer"
              placeholder="应用主机需要注册到的tcp服务地址。eg: 10.65.208.87:19005"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="loadConfig"> 加载配置 </el-button>
          <el-button type="primary" @click="clickSaveBut"> 保存并启动服务 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped></style>
